import React, { useState, useEffect, useCallback } from "react";
import { RadarChartOutlined } from "@ant-design/icons";
import { Collapse, Button, message, Popconfirm } from "antd";
import request from "../../utils/request";
import Changerules from "./Changerules";
const { Panel } = Collapse;

function List() {
  const [visible, setVisible] = useState(false);
  const [rule, setrule] = useState();
  const [total, settotal] = useState();
  const [type, settype] = useState();
  const [info, setinfo] = useState();
  const onCreate = useCallback((values) => {
    request.post("/rules/insert", values).then(({ data }) => {
      if (data.code === 1) {
        message.success("添加成功");
        settotal(total + 1);
      }
    });
    setVisible(false);
  }, []);
  const onCancel = () => {
    setVisible(false);
  };
  const onmodify = useCallback((val) => {
    const { _id } = val;
    request.put("/rules/" + _id, val).then(({ data }) => {
      if (data.code === 1) {
        settotal(total + 1);
        message.success("修改成功");
      }
    });
    setVisible(false);
  }, []);

  const modifyrule = useCallback((val, e) => {
    setinfo(val);
    settype("");
    setVisible(true);
    e.stopPropagation();
  });
  const deleterule = useCallback((id, e) => {
    e.stopPropagation();
    request.delete("/rules/" + id).then(({ data }) => {
      if (data.code === 1) {
        settotal(total - 1);
        message.success("删除成功");
      } else {
        message.error("删除失败");
      }
      console.log("data33", data);
    });
  }, []);
  useEffect(() => {
    request.get("/rules").then(({ data: { data } }) => {
      setrule(data.list);
      settotal(data.total);
    });
  }, [total]);
  return (
    <>
      <div
        style={{
          width: "100%",
          padding: 10,
          backgroundColor: "#fff",
          marginTop: 20,
          borderRadius: 10,
        }}
      >
        <h2 style={{ textAlign: "center" }}>社团规章制度</h2>
        <p style={{ textAlign: "right" }}>
          <Button
            onClick={() => {
              setVisible(true);
              settype("add");
            }}
            type="primary"
          >
            新增规则
          </Button>
        </p>
        <div style={{ height: "60vh", overflow: "auto" }}>
          <Collapse
            bordered={false}
            defaultActiveKey={["0"]}
            expandIcon={() => (
              <RadarChartOutlined style={{ fontSize: 20, color: "#f50" }} />
            )}
          >
            {rule
              ? rule.map((item, idx) => {
                  return (
                    <Panel
                      header={item.text}
                      key={idx}
                      extra={
                        <div>
                          <Button
                            onClick={modifyrule.bind(null, item)}
                            type="link"
                          >
                            修改
                          </Button>
                          <Popconfirm
                            title="您确定要删除吗?"
                            onConfirm={deleterule.bind(null, item._id)}
                            onCancel={() => {
                              message.info("取消修改");
                            }}
                            okText="确定"
                            cancelText="取消"
                          >
                            <Button type="text" danger>
                              删除
                            </Button>
                          </Popconfirm>
                        </div>
                      }
                    >
                      <p>{item.content}</p>
                    </Panel>
                  );
                })
              : ""}
          </Collapse>
        </div>
      </div>
      {type === "add" ? (
        <Changerules
          okText="添加"
          title="新增规则"
          visible={visible}
          onCreate={onCreate}
          onCancel={onCancel}
        />
      ) : (
        <Changerules
          okText="修改"
          title="修改规则"
          data={info}
          visible={visible}
          onCreate={onmodify}
          onCancel={onCancel}
        />
      )}
    </>
  );
}

export default List;
